tags: iThome 鐵人賽 30天

除了可以從外部傳送變數進入component內外，component內本身也可以做到變數的控管喔~

State

React的Class是物件導向的寫法，所以需要把state加在constructor裡面，並因為要繼承上一層parent的constructor，須加上super()。

至於定義state就用this.state來表示，把state當作一個Object並把初始變數放在裡面

import React, { Component } from 'react'

export default class Header extends Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <div className="header">
        <h3>{this.props.title}</h3>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

那要改變state的值 (狀態) 要怎麼做？能直接用this.state.count = 1來改變嗎？

答案是不行的，state只能由setState()來修改，把要修改的state丟進去()內即可，例如我們讓介面點擊數字count就會加1

import React, { Component } from 'react'

export default class Header extends Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <div className="header">
        <h3>{this.props.title}</h3>
        <p
          onClick={
            e =>
              this.setState({ count: this.state.count + 1 })
          }
        >
          {this.state.count}
        </p>
      </div>
    )
  }
}

這裡用到onClick在p元素上，只要點擊數字後就會觸發onClick事件，並透過this.setState自動把數字加1

state當成變數傳遞至下個component

當然state也可以當成變數傳遞至下個component

比如我們把Count獨立出來變成一個Component，並把count傳遞進去
Count.jsx

import React, { Component } from 'react'

export default class Count extends Component {

  render() {
    return (
        <p
            onClick={this.props.setCount}
        >
            {this.props.count}
        </p>
    )
  }
}

Header.jsx

import React, { Component } from 'react'
import Count from './Count' // 記得把Count給引入進來

export default class Header extends Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <div className="header">
        <h3>{this.props.title}</h3>
        <Count 
            count={this.state.count}
            setCount={
                () => 
                    this.setState(this.state.count + 1)
            }
        />
      </div>
    )
  }
}

在props的那篇沒有說到，這裡補充一下，props除了傳遞變數以外，也可以傳遞function等各種形式，所以這裡定義一個setCount，並在呼叫時使用this.setState。

後記

接下來要講述生命週期了，React的生命週期要用的好才不會有迴圈的事情發生，是新手滿容易出現的問題，所以需要好好熟悉它的機制才不容易發生錯誤~

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)